<template>
	<view class="page">
		<view class="topBox">
			<image class="bg" src="../../static/images/IndexBg.png" mode="heightFix"></image>
			<view class="content" >
				<image class="quit" src="../../static/images/quit.png" mode="heightFix" @click="handleQuit"></image>
				<image class="cover" :src="selectInfoAccount.imageInfo? selectInfoAccount.imageInfo :'../../static/images/default_avatar.png'" mode="" style="border-radius: 50%;" ></image>
				<view class="name">
					<!-- 微信用户 -->
					<!-- <view class="changeBtn" @click="goPage('/pages/componentsA/switchBind/switchBind')">
						账号切换
					</view> -->
				</view>
				<view class="money">
					  <text>现金金额：</text> ￥{{countMoneyObj.accountBalance | handledMoney}}   <text>补贴金额：</text> ￥{{ countMoneyObj.subsidyBalance | handledMoney}}
					<!-- <view class="btns">
						<view class="btn" @click="goPage('/pages/componentsA/notice/notice')">
							公告
						</view>
						<view class="btn" @click="goPage('')">
							消息
						</view>
					</view> -->
				</view>
				<text>最后一次交易：{{countMoneyObj.lastDate}}</text>
			</view>
		
		</view>
		
		<view class="infoItem">
			<view class="info" v-for="(item,index) in infoItem" :key="index">
				<image :src="item.icon" mode="widthFix"></image>
				<text>{{item.label}}: {{item.val}}</text>
			</view>
		</view>
		<view class="pageItem">
			<view class="item" v-for="(item,index) in pageItem" :key="index" @click="handleGoPage(item.url,item.text)">
				<image :src="item.icon" ></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<u-picker :show="selectMerchShow" :columns="merchArr" keyName="label"
			@cancel="selectMerchShow = false"	@confirm="selectConfirm"></u-picker>
	</view>
</template>

<script>
	import {getMemberApi,countAmtApi,queryMerchApi,exitLoginApi,geth5MemberApi,getDhLicenseApi} from '@/common/api/commonApi/commonApi.js'
	import base from '@/common/config'
	import {pageItem} from './data.js'
	export default {
		data() {
			return {
				pageItem,
				infoItem:[
					{
						icon: '../../static/images/IndexStudentNum.png',
						label: '工号',
						val: '--'
					},
					{
						icon: '../../static/images/IndexClass.png',
						label: '部门',
						val: '--'
					},
					{
						icon: '../../static/images/IndexName.png',
						label: '姓名',
						val: '--'
					},
					{
						icon: '../../static/images/IndexPhone.png',
						label: '手机',
						val: '--'
					},
				],
				selectInfoAccount : uni.getStorageSync('selectInfoAccount'),
				countMoneyObj:{
					lastDate : '--',
					accountBalance : '0.00',
				},
				merchArr:[[]],
				selectMerchShow: false
			}
		},
		methods: {
			selectConfirm(e){
				console.log(e);
				let merchNo = e.value[0].id
				this.selectMerchShow = false
				this.goPage('/pages/componentsC/dingcanMan/dingcanMan',{
					merchNo
				})
			},
			getMerch(){
				queryMerchApi().then(res=>{
					res.data.forEach(item=>{
						let obj = {
							label : item.merch_name,
							id : item.merch_no,
						}
						this.merchArr[0].push(obj)
					})
				})
			},
			getCountMoney(){
				return countAmtApi().then(res=>{
					this.countMoneyObj = res.data
				})
			},
			bindAccount(){
				uni.showModal({
					content: '暂未绑定账号信息，是否进行绑定',
					success: (res) => {
						if(res.confirm){
							this.goPage('/pages/componentsA/bingInfo/bingInfo')
						}
					}
				})
			},
			handleQuit(){
				uni.showModal({
					content:'是否退出登录',
					success:(res)=>{
						if(res.confirm){
							exitLoginApi().then(res=>{
								uni.reLaunch({
									url:'/pages/componentsA/bingInfo/bingInfo'
								})
							})
						}
					}
				})
			},
			handleGoPage(url,text){
				console.log(arguments);
				let info = uni.getStorageSync('selectInfoAccount')
				// if(!info){
					// this.bindAccount()
				// }else{
					if(url=='/pages/componentsC/dingcanMan/dingcanMan'){
						getDhLicenseApi().then(res=>{
							console.log(res);
							if(res.res== 0){
								this.setMessage('未获取到系统的授权信息')
							}else if(res.res== 2){
								this.setMessage('授权已过期，请重新申请授权')
							}else if(res.res==1){
								this.selectMerchShow = true
							}
						})
					}else{
						this.goPage(url)
					}
				// }
			},
			getRemberInfo(){
				let selectInfoAccount = uni.getStorageSync('selectInfoAccount')
				return geth5MemberApi({
					memberId : selectInfoAccount.id ? selectInfoAccount.id : ''
				}).then(res=>{
					this.selectInfoAccount = res.data[0]
					if(this.selectInfoAccount.imageInfo) this.selectInfoAccount.imageInfo = this.selectInfoAccount.imageInfo.replace(/[\r\n]/g,"")
					uni.setStorageSync('selectInfoAccount',this.selectInfoAccount)
					this.infoItem[0].val = this.selectInfoAccount.memberNo
					this.infoItem[1].val =   this.selectInfoAccount.subsidiaryName
					this.infoItem[2].val = this.selectInfoAccount.memberName
					this.infoItem[3].val = this.selectInfoAccount.memberPhone
					uni.setStorageSync('token',res.tokenObj.token)
					this.getCountMoney()
				}).catch(err=>{
					console.log(err);
					if(err.code==50 && err.msg == '该微信没有绑定'){
						this.bindAccount()
					}
				})
			}
		},
		onLoad() {
			this.infoItem[0].val = this.selectInfoAccount.memberNo
			this.infoItem[1].val =   this.selectInfoAccount.subsidiaryName
			this.infoItem[2].val = this.selectInfoAccount.memberName
			this.infoItem[3].val = this.selectInfoAccount.memberPhone
			this.getCountMoney()
			this.getMerch()
		},
		async onShow() {
			await this.getRemberInfo()
		},
	}
</script>

<style lang="scss" scoped>
.page{
	.topBox{
		height: 548rpx;
		position: relative;
		background: #4089f0;
		.bg{
			top: 0;
			left: 0;
			position: absolute;
			height: 548rpx;
		}
		
		.content{
			position: relative;
			z-index: 10;
			width: 100%;
			@include flexColCenter;
			color: #fff;
			.quit{
				position: absolute;
				top: 0;
				right: 5%;
				width: 60rpx;
				height: 60rpx;
				pointer-events: auto;
			}
			.cover{
				width: 128rpx;
				height: 128rpx;
				background: #f1f1f1;
				border-radius: 50%;
			}
			text{
				font-size: 24rpx;
			}
			.name{
				margin: 20rpx 0 30rpx;
				position: relative;
				.changeBtn{
					font-size: 14px;
					color: #fff;
					background: #94c0fe;
					border-radius: 12rpx;
					padding: 10rpx;
					// border: 2rpx solid #94c0fe;
					position: absolute;
					white-space: nowrap;
					top: 50%;
					transform: translateY(-50%);
					right: -200%;
				}
			}
			.money{
				font-size: 44rpx;
				margin-bottom: 20rpx;
				@include flexXCenter;
				position: relative;
				text{
					margin-left: 30rpx;
				}
				.btns{
					display: flex;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: -90%;
					.btn{
					    padding: 6rpx 8rpx;
					    font-size: 28rpx;
					    color: white;
					    background: #05c57a;
					    border-radius: 12rpx;
						&:nth-child(2){
							background-color: #fd9b28;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		
	}
	
	
	.infoItem{
		width: 90%;
		margin: auto;
		margin-top: -200rpx;
		border-radius: 10px;
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		position: relative;
		z-index: 10;
		.info{
			width: 50%;
			display: flex;
			align-items: center;
			height: 90rpx;
			border-right: 2rpx solid #dcdcdc;
			border-bottom: 2rpx solid #dcdcdc;
			image{
				width: 40rpx;
				margin: 0 10rpx;
			}
			text{
				color: #000;
			}
			&:nth-child(2){
				border-right: 0;
			}
			&:nth-child(3){
				border-bottom: 0;
			}
			&:nth-child(4){
				border-right: 0;
				border-bottom: 0;
			}
		}
		
	}
	
	.pageItem{
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		.item{
			height: 150rpx;
			width: 25%;
			padding: 24rpx 0;
			@include flexColCenter;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			text{
				color: #666;
				margin-top: 12rpx;
				font-size: 26rpx;
			}
		}
	}
}
</style>
